<template>
  <div :style="`margin:${isAdmin?0:-15}px`">
    <ZgDialog
      title="提交流程"
      v-model="showSubmit"
      @ok="onSubmitOk"
    >
      <Submit></Submit>
    </ZgDialog>
    <ZgDialog
      title="退回流程"
      width="60%"
      v-model="showReturn"
      @ok="onReturnOk"
    >
      <Return></Return>
    </ZgDialog>
    <ZgDrawer width="30%" v-model="showFlowInst">
      <div class="wfull scroll pt15" :style="{height:`${winHeight-90}px`}">
        <a-timeline>
          <a-timeline-item color="green">
            <div class="mb10">某某环节名称</div>
            <div><a-tag color="green">张三【提交】2024-01-22 12:30</a-tag></div>
          </a-timeline-item>
          <a-timeline-item color="green">
            <div class="mb10">某某环节名称</div>
            <div><a-tag color="green">李四【提交】2024-01-22 12:30</a-tag></div>
          </a-timeline-item>
          <a-timeline-item color="green">
            <div class="mb10">某某环节名称</div>
            <div class="mb10"><a-tag color="green">李宁宁【提交】2024-01-22 12:30</a-tag></div>
            <div><a-tag style="text-decoration:line-through;">张建伟【跳过】</a-tag></div>
          </a-timeline-item>
          <a-timeline-item color="blue">
            <div class="mb10">某某环节名称</div>
            <a-timeline>
              <a-timeline-item color="green">
                <div class="mb10">某某环节名称</div>
                <div><a-tag color="green">李凯【提交】2024-01-22 12:30</a-tag></div>
              </a-timeline-item>
              <a-timeline-item color="blue">
                <div class="mb10">某某环节名称</div>
                <div class="mb10"><a-tag color="blue">赵新【处理中】</a-tag></div>
                <div><a-tag color="">李凯【待处理】</a-tag></div>
              </a-timeline-item>
            </a-timeline>
          </a-timeline-item>
        </a-timeline>
      </div>
    </ZgDrawer>
    <div class="pl15 pr15 pt10">
      <a-row>
        <a-col :span="12">
          <div class="fw8 fs14">某某流程信息/某某环节</div>
        </a-col>
        <a-col :span="12" class="tar flx-e">
          <a-button v-if="!isAdmin" class="mr10" type="link" @click="toClose">
            <i class="fa fa-power-off mr5"/>关闭窗口
          </a-button>
        </a-col>
      </a-row>
    </div>
    <div class="pd10">
      <div style="background:#f6f6f6;padding:10px;">
        <a-row :gutter="10">
          <a-col :span="isAdmin?16:14">
            <div class="flx-s">
              <div class="mr10">下一环节：</div>
              <ZgSelect :width="200" class="mr25"></ZgSelect>
              <div class="mr10">处理人：</div>
              <a-input class="w100 mr10" disabled="" value="某某某"></a-input>
              <ZgUserSelect icon="user" title="选择处理人"></ZgUserSelect>
            </div>
          </a-col>
          <a-col :span="isAdmin?8:10" class="flx-e">
            <ZgCheckbox v-model="showFlowData" class="mr10">查看流程单据</ZgCheckbox>
            <ZgDropdown v-if="isAdmin">流程操作</ZgDropdown>
            <div v-else class="flx-s">
              <ZgButton icon="check-circle" type="primary" @click="toSubmit" class="mr10">提交</ZgButton>
              <ZgButton icon="arrow-circle-left" type="default" @click="toReturn" class="mr10">退回</ZgButton>
              <ZgButton icon="eraser" type="default" class="mr10">作废</ZgButton>
              <ZgButton icon="eye" type="default" @click="showFlowInst=true">跟踪</ZgButton>
            </div>
          </a-col>
        </a-row>
        <a-row class="mt10" v-if="showFlowData">
          <a-col :span="24">
            <a-collapse v-model="activeKey" accordion>
              <a-collapse-panel key="1" header="主流程单据">
                <div class="flx-s" style="flex-wrap:wrap;">
                  <div class="file flx-s" v-for="i in 10" :key="`master${i}`">
                    <a class="mr15">某某文件.xlsx</a>
                    <i class="fa fa-download mr8"></i>
                    <i class="fa fa-search"></i>
                  </div>
                </div>
              </a-collapse-panel>
              <a-collapse-panel key="2" header="个性化单据">
                <a>某某文件.docx</a>
              </a-collapse-panel>
              <a-collapse-panel key="3" header="关联流程单据">
                <div class="flx-s pt20 pl10 pos-rlt" style="flex-wrap:wrap;border:dashed 1px #ccc;">
                  <div class="pos-abs bg-white pd5" style="top:-18px;left:20px;color: #3fa4db;">流程实例编号：xxxxxxxxxxxxxxxxxx</div>
                  <div class="file flx-s" v-for="i in 10" :key="`master${i}`">
                    <a class="mr15">某某文件.xlsx</a>
                    <i class="fa fa-download mr8"></i>
                    <i class="fa fa-search"></i>
                  </div>
                </div>
              </a-collapse-panel>
            </a-collapse>
          </a-col>
        </a-row>
      </div>
    </div>
    <a-row>
      <a-col :span="24">
        <Form></Form>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import Form from './Form'
import Submit from './Submit'
import Return from './Return'
export default {
  props: {
    isAdmin: {
      type: Boolean,
      default: false
    }
  },
  components: {
    Form, Submit, Return
  },
  data () {
    return {
      left: 5,
      right: 5,
      current: 0,
      tab: 1,
      activeKey: ['1'],
      showSubmit: false,
      showReturn: false,
      showFlowInst: false,
      showFlowData: false
    }
  },
  methods: {
    toClose () {
      this.$emit('close')
    },
    toggleLeft () {
      this.left = this.left === 5 ? 0 : 5
    },
    toggleRight () {
      this.right = this.right === 5 ? 0 : 5
    },
    toSubmit () {
      this.showSubmit = true
    },
    onSubmitOk () {

    },
    toReturn () {
      this.showReturn = true
    },
    onReturnOk () {

    }
  }
}
</script>

<style scoped>
  .file{
    border:solid 1px #ddd;
    border-radius:4px;
    background:#f2f2f2;
    color:#3fa4db;
    padding:4px 10px;
    margin-right:15px;
    margin-bottom:10px;
  }
</style>
